<template>
    <div class="app-container calendar-list-container">
        <!-- 搜索框，对工段信息进行搜索 -->
      <div class="filter-container">
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.produceNo"
                style="width: 150px;margin-right:15px;margin-top:7px"
                class="filter-item"
                placeholder="请输入品号"
        ></el-input>
        <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.outid"
                style="width: 150px;margin-right:15px;margin-top:7px"
                class="filter-item"
                placeholder="请输入规格"
        ></el-input>
        <el-select
            clearable
            @keyup.enter.native="getData"
            v-model="listQuery.type"
            placeholder="请选择条码类型"
            class="filter-item"
            style="width: 150px;margin-right:15px;margin-top:7px">
            <el-option
                v-for="(item,index) in optionsProcess"
                :key="index"
                :label="item"
                :value="item">
            </el-option>
        </el-select>
        <el-select
            clearable
            @keyup.enter.native="getData"
            v-model="listQuery.processOrder"
            placeholder="请选择工序"
            class="filter-item"
            filterable
            style="width: 150px;margin-right:15px;margin-top:7px">
            <el-option
                v-for="(item,index) in optionsprocessOrder"
                :key="index"
                :label="item"
                :value="item">
            </el-option>
        </el-select>
        <el-select
            @keyup.enter.native="getData"
            v-model="listQuery.isEnd"
            placeholder="请选择工序"
            class="filter-item"
            style="width: 150px;margin-right:15px;margin-top:7px">
            <el-option
                v-for="(item,index) in optionsIsEnd"
                :key="index"
                :label="item"
                :value="item">
            </el-option>
        </el-select>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
      </div>

    <!-- 表单 -->
    <el-table :data="tablelList"
    v-loading="listLoading"
    element-loading-text="拼命加载中"
    stripe border fit
    highlight-current-row
    style="width: 100%"
    height="700px">
        <el-table-column label="序号" type="index" align="center"/>
        <el-table-column label="工序" prop="processOrder" align="center"/>
        <el-table-column label="条码类型" prop="type" align="center"/>
        <el-table-column label="元件编码" prop="previd" align="center"/>
        <el-table-column label="华为品号" prop="mid" align="center"/>
        <el-table-column label="产品号" prop="produceNo" align="center"/>
        <!-- <el-table-column label="产品编号" prop="technologyNo" align="center"/> -->
        <el-table-column label="规格" prop="outid" align="center"/>
        <el-table-column label="品名" prop="descript" align="center"/>
        <el-table-column label="数量" prop="compositionAmount" align="center"/>
        <el-table-column label="状态" prop="isEnd" align="center">
        <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.isEnd == 0
                  ? "已删除"
                  : scope.row.isEnd == 1
                  ? "未删除":"-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作"  align="center" width="90" v-if="userInfo.roleId != 30 && userInfo.roleId != 37 && userInfo.roleId != 16">
            <template slot-scope="scope" >
                <div class="fx" style="display: flex">
                <el-button
                    icon="el-icon-delete"
                    class="el-button el-button--danger"
                    style="font-size: 15px;"
                    @click="submitDel(scope.row,scope.$index)"
                ></el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>

       <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40,100,300,500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    </div>
</template>

<script>
import { findProcessJobClassCodeEms, delProcessJobClassCodeEms } from '../../api/processRoute'
export default {
    name: 'ptsCodeFind',
    data() {
        return {
            listQuery: {                                //搜索的内容表单
                page: 1,
                limit: 10,
                isEnd: '未删除'
            },
            optionsProcess: ['器件','附件','铭牌','运维二维码'],
            optionsIsEnd: ['已删除','未删除'],
            optionsprocessOrder: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50'],
            total: 0,                                  //总的信息条数
            tablelList: [],                               //table表单的信息
            tableObject: {},    
            idx: -1,
            listLoading: false,                          //table加载的动画控制条件
            userInfo: this.$store.state.user.userInfo
        }
    },
    methods: {
        async handleFilter() {
            this.listLoading = true
            let query = Object.assign({},this.listQuery)
            if(!query.type) delete query.type
            if(!query.produceNo) delete query.produceNo
            if(!query.outid) delete query.outid
            if(!query.processOrder) delete query.processOrder
            query.isEnd = this.listQuery.isEnd == '未删除'?1:0
            const {data} = await findProcessJobClassCodeEms(query)
            this.tablelList = data.list
            this.total = data.count
            this.listLoading = false
        },
        submitDel(row,index) {
            this.$prompt(' ', '备注', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: '',
            inputErrorMessage: ''
            }).then(({ value }) => {
                this.tableObject = row
                this.tableObject.comment = value
                this.idx = index
                this.deleteData()
            }).catch(() => {
            });
        },
        async deleteData(){
            const data = await delProcessJobClassCodeEms(this.tableObject.type,{outid: this.tableObject.outid,admin: this.userInfo.adminId,comment: this.tableObject.comment,produceNo: this.tableObject.produceNo})
            if(data.code == '1'){
                  this.tablelList.splice(this.idx,1)
                  this.$message({
                      message:  data.msg,
                      type: 'success'
                   })
                this.tableObject = {}
                this.idx = -1
            } else {
                this.$message({
                      message:  data.msg,
                      type: 'error'
                   })
            }
        },
        getData() {
            this.listQuery.page = 1
            this.listQuery.limit = 10
            this.handleFilter()
        },
        handleSizeChange(val) {
            this.listQuery.limit = val
            this.handleFilter()
        },
        handleCurrentChange(val) {
            this.listQuery.page = val
            this.handleFilter()
        }
    },
      // 在生命周期函数调用"搜索"按钮绑定的函数，显示已有的数据
    mounted() {
        this.handleFilter()
  },
}
</script>

<style>

</style>
